<!--
 * @Author: 日光独倾 1563196747@qq.com
 * @Date: 2023-04-12 22:42:31
 * @LastEditors: 日光独倾 1563196747@qq.com
 * @LastEditTime: 2023-04-13 11:28:36
 * @FilePath: \影音盒子\vue-app\src\views\Book.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="carousel" v-loading.fullscreen.lock="isLoading">
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in bookList" :key="item.id">
          <img class="book-cover" :src="imgBase + item.cover.url" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tab-box">
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true">
        <el-tab-pane label="虚构类" name="book_fiction">
          <div>
            <ul>
              <li class="book-item" v-for="item in bookList" :key="item.id">
                <div class="book-img">
                  <img :src="imgBase + item.cover.url" alt="" />
                </div>
                <div class="info">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.info }}</p>
                  <el-rate
                    :value="getRating(item.rating.value)"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="非虚构类" name="book_nonfiction">
          <div>
            <ul>
              <li class="book-item" v-for="item in bookList" :key="item.id">
                <div class="book-img">
                  <img :src="imgBase + item.cover.url" alt="" />
                </div>
                <div class="info">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.info }}</p>
                  <el-rate
                    :value="getRating(item.rating.value)"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Book",
  created() {
    this.getData();
  },
  data() {
    return {
      baseUrl: "https://bird.ioliu.cn/v2?url=",
      imgBase: "https://images.weserv.nl/?url=",
      bookList: [],
      activeName: "book_fiction",
      isLoading: true,
    };
  },
  props: {},
  methods: {
    getData() {
      this.isLoading = true
      const book_url =
        "https://m.douban.com/rexxar/api/v2/subject_collection/" +
        this.activeName +
        "/items?start=0&count=8";
      this.axios.get(this.baseUrl + book_url).then((res) => {
        this.bookList = res.data.subject_collection_items;
        this.isLoading = false
      });
    },
    getRating(value){
      return Math.floor((value/2)*10)/10
    },
    handleClick() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.book-item {
  display: flex;
  .book-img {
    flex: 2;
    img {
      width: 100%;
    }
  }
  .info {
    flex: 5;
  }
}

.book-cover {
  width: 100%;
  height: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>